<template>
  <div class="card is-query">
    <el-text type="primary" class="card-title">保函查验</el-text>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      require-asterisk-position="right">
      <el-form-item label="保函编号" prop="id">
        <el-input v-model.trim="ruleForm.id" placeholder="请输入保函编号" />
      </el-form-item>
      <el-form-item label="保函金额" prop="amount">
        <el-input v-model.trim="ruleForm.amount" placeholder="请输入保函金额(元)" />
      </el-form-item>
      <el-form-item label="被担保人" prop="guarantee">
        <el-input v-model.trim="ruleForm.guarantee" placeholder="请输入被担保人名称" />
      </el-form-item>
      <el-form-item label="受益人" prop="beneficiary">
        <el-input v-model.trim="ruleForm.beneficiary" placeholder="请输入受益人名称" />
      </el-form-item>
      <el-form-item label="开立日期" prop="date">
        <el-date-picker
          v-model="ruleForm.date"
          type="date"
          placeholder="yyyy/mm/日"/>
      </el-form-item>
      <el-button type="primary" @click="handleConfirm">提交查验</el-button>
    </el-form>
  </div>


  <!-- 提交查验后展示的数据 -->
  <div class="card" v-if="showResult">
    <el-text type="primary" class="card-title">查验结果</el-text>
    <el-descriptions :column="1" label-width="140">
      <el-descriptions-item label="保函金额：">{{ numeral(7000000).format('0,0') }}</el-descriptions-item>
      <el-descriptions-item label="被担保人：">{{ '武汉航城智慧科技有限公司' }}</el-descriptions-item>
      <el-descriptions-item label="受益人：">{{ '武汉市黄陂区水务和湖泊局' }}</el-descriptions-item>
      <el-descriptions-item label="项目名称：">{{ '黄陂区大中型水库监测设施建设工程施工' }}</el-descriptions-item>
      <el-descriptions-item label="合同名称：">{{ '建设工程施工合同' }}</el-descriptions-item>
      <el-descriptions-item label="开立日期：">{{ '2025-1-26' }}</el-descriptions-item>
      <el-descriptions-item label="失效日期：">{{ '2025-7-26' }}</el-descriptions-item>
      <el-descriptions-item label="保函状态：">{{ '已生效' }}</el-descriptions-item>
    </el-descriptions>
    <div class="card-text"><el-icon class="iconfont icon-zhengque" />保函信息相符</div>
  </div>
</template>

<script setup>
const ruleForm = reactive({
  // 保函编号
  id: '',
  // 保函金额
  amount: '',
  // 被担保人
  guarantee: '',
  // 受益人
  beneficiary: '',
  // 开立日期
  date: ''
})
const rules = reactive({
  id: [{ required: true, message: '请输入保函编号', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入保函金额(元)', trigger: 'blur' }],
  guarantee: [{ required: true, message: '请输入被担保人名称', trigger: 'blur' }],
  beneficiary: [{ required: true, message: '请输入受益人名称', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期' }],
})


// 是否显示查验结果
const showResult = ref(false);
const ruleFormRef = ref(null)
// 提交查验
function handleConfirm() {
  // ruleFormRef.value.validate(valid => {
  //   if (valid) {
      showResult.value = true
  //   }
  // })
}
</script>

<style lang="scss" scoped>
.card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  &.is-query{
    padding-bottom: 30px;
    border-bottom: 3px dashed  var(--el-color-primary);
  }
  &-title{
    font-weight: 700;
    font-size: 40px;
    margin: 30px 0;
  }
  :deep(.el-descriptions){
    --el-text-color-regular: #362828;
    display: flex;
    justify-content: center;
    .el-descriptions__cell{
      font-weight: 700;
      font-size: 26px;
    }
    .el-descriptions__label{
      text-align: end;
    }
  }
  &-text{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #362828;
    :deep(.el-icon){
      font-size: 67px;
      color: #6EC33D;
      margin-right: 20px;
    }
  }
}

.el-form{
  margin: 0 auto;
  text-align: center;
  :deep(.el-form-item){
    .el-form-item__content{
      min-width: 530px;
      .el-input{
        width: 100%;
      }
    }
  }
}
</style>
